/**
 * @license
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.nav {
  width: 246px;
  height: 100%;
  overflow: hidden;
}

.nav__location {
  display: flex;
  flex-direction: row;
  align-items: center;

  @include shadow-4dp();
  @include typo-title();
  position: fixed;
  height: 56px;
  background: #FFF;
  width: 100%;
  padding-left: 312px;
  color: #757575;
}

.nav__underlay {
  background: rgba(0,0,0,0.54);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.3333s cubic-bezier(0,0,0.21,1);
  pointer-events: none;

  &.nav--expanded {
    opacity: 1;
    pointer-events: auto;
  }
}

.nav__content {
  width: 240px;
  height: 100%;
  background: #37474F;
  will-change: transform;
  @include shadow-3dp();
}

.nav--animatable .nav__content {
  transition: transform 0.3333s cubic-bezier(0,0,0.21,1);
}

.container--small {

  .nav {
    position: fixed;
    pointer-events: none;

    &.nav--expanded {
      pointer-events: auto;

      .nav__content {
        transform: translateX(0);
      }
    }
  }

  .nav__content {
    transform: translateX(-100%);
  }

}

.nav__user-email {
  @include typo-body-1();
  line-height: 20px;
  width: 176px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #FFF;
  height: 20px;
  margin: 0;
}

.nav__admin-badge.mdl-badge {
  position: absolute;
  left: 48px;
  top: 60px;
}

.nav__header {
  width: 100%;
  height: 152px;
  background: #263238;
  position: relative;
  padding: 56px 16px 16px 16px;
}

.nav__gravatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.nav__dropdown {
  display: flex;
  flex-direction: row;
  position: relative;
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__list-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #FFF;
  text-decoration: none;
  height: 100%;
}

.nav__list-item {
  padding: 0 0 0 40px;
  margin: 0;
  height: 56px;
  font-size: 13px;
  color: rgba(255,255,255,0.57);

  &:hover {
    background-color: #00BCD4;
    cursor: pointer;
    color: #37474F;
  }
}

.nav__list-icon {
  width: 24px;
  height: 24px;
  color: #78909c;
  margin-right: 32px;
}

#hdrbtn {
  color: #FFF;
  margin-top: -6px;
}

@media (min-width: 850px) {
  .nav__location {
    position: fixed;
    height: 64px;
  }

  .nav__underlay {
    opacity: 0;
    pointer-events: none;

    &.nav--expanded {
      opacity: 0;
      pointer-events: none;
    }
  }
}
